<template>
  <div class="container">
      <mt-header fixed title="报名详情">
        <router-link :to="{name: 'touristDetailAdmin', params:{touristId:pageReq.projectId }}" slot="left">
          <mt-button icon="back">返回</mt-button>
        </router-link>
      </mt-header>

        <div class="unit-cell-container">
          <mt-navbar v-model="selectedTab">
            <mt-tab-item id="active_user">最近的</mt-tab-item>
            <mt-tab-item id="all_user">所有的</mt-tab-item>
            <mt-tab-item id="statistic">统计</mt-tab-item>
          </mt-navbar>
          <div>
          <mt-tab-container v-model="selectedTab">
            <mt-tab-container-item id="active_user">
              <div class="weui-cells weui-cells-form bottom-paddiing" v-for ="item in bookedUserList">
                <div class="unit-cell">
                  <div class="cell-top-left">
                    <i class="fa fa-user"></i>
                    <span class="user-name">{{item.contactName}}</span>
                  </div>
                  <div class="cell-top-right">
                    <span class="user-phone">手机号：{{item.contactPhone}}</span>
                  </div>
                  <div class="cell-middle-left">
                    <p>创建日期：{{item.createTime}}</p>
                    <p>预定日期：{{item.bookedTime}}</p>
                  </div>
                  <div class="cell-middle-right">
                    <span>报名人数：</span>
                    <p>{{item.bookedNumber}}</p>
                  </div>
                  <div class="cell-bottom-left" v-if="project.type === 1">
                    <p>选择的场馆：</p>
                  </div>
                  <div class="cell-bottom-right" v-if="project.type === 1">
                    <span v-for="zoneItem in item.zoneList"> {{zoneItem.zoneName}}</span>
                  </div>
                  <div class="cell-addon-left">
                    <mt-spinner type="double-bounce" color="red" v-if="item.touchStatus"></mt-spinner>
                  </div>
                  <div class="cell-addon-right">
                    <mt-cell title="联系过吗？">
                      <mt-switch v-model="item.touchStatus" @change="changeTouchStatus(item.id, item.touchStatus)">{{item.touchStatus?'未联系':'已联系'}}</mt-switch>
                    </mt-cell>
                  </div>
                </div>
              </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="all_user">
            <div class="weui-cells weui-cells-form bottom-paddiing" v-for ="item in allBookedUserList">
              <div class="unit-cell">
                <div class="cell-top-left">
                  <i class="fa fa-user"></i>
                  <span class="user-name">{{item.contactName}}</span>
                </div>
                <div class="cell-top-right">
                  <span class="user-phone">手机号：{{item.contactPhone}}</span>
                </div>
                <div class="cell-middle-left">
                  <p>创建日期：{{item.createTime}}</p>
                  <p>预定日期：{{item.bookedTime}}</p>
                </div>
                <div class="cell-middle-right">
                  <span>报名人数：</span>
                  <p>{{item.bookedNumber}}</p>
                </div>
                <div class="cell-bottom-left" v-if="project.type === 1">
                  <p>选择的场馆：</p>
                </div>
                <div class="cell-bottom-right" v-if="project.type === 1">
                  <span v-for="zoneItem in item.zoneList"> {{zoneItem.zoneName}}</span>
                </div>
              </div>
            </div>
          </mt-tab-container-item>

            <mt-tab-container-item id="statistic">
              <div class="weui-cells weui-cells-form bottom-paddiing">
                <div class="weui-cell">
                  <div class="weui-cell__bd">
                    <p>最近报名人数：</p>
                  </div>
                  <div class="weui-cell__ft">{{this.bookedUserStat.newBookedNumber}}</div>
                </div>
              </div>
              <div class="weui-cells weui-cells-form bottom-paddiing">
                <div class="weui-cell">
                  <div class="weui-cell__bd">
                    <p>最近成团人数：</p>
                  </div>
                  <div class="weui-cell__ft">{{this.bookedUserStat.newTeamNumber}}</div>
                </div>
              </div>
              <div class="weui-cells weui-cells-form bottom-paddiing">
                <div class="weui-cell">
                  <div class="weui-cell__bd">
                    <p>总报名人数：</p>
                  </div>
                  <div class="weui-cell__ft">{{this.bookedUserStat.bookedNumber}}</div>
                </div>
              </div>
              <div class="weui-cells weui-cells-form bottom-paddiing">
                <div class="weui-cell">
                  <div class="weui-cell__bd">
                    <p>总成团人数：</p>
                  </div>
                  <div class="weui-cell__ft">{{this.bookedUserStat.teamNumber}}</div>
                </div>
              </div>
            </mt-tab-container-item>
          </mt-tab-container>
          </div>
      </div>


    <div class="weui-cells weui-cells-form bottom-paddiing" v-if="bookedUserList.length ==0">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <div class="user-phone">暂时没有人报名</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import fetch from '../../utils/fetch'
  import MtCell from "../../../node_modules/mint-ui/packages/cell/src/cell";
  import MtButton from "../../../node_modules/mint-ui/packages/button/src/button";
  import VueCoreImageUpload from '../../../node_modules/vue-core-image-upload/src/vue-core-image-upload.vue';
  import vSelect from 'vue-select';
  import MtPopup from "../../../node_modules/mint-ui/packages/popup/src/popup"

  export default{
      data (){
        return {
          selectedTab: "active_user",
          bookedUserList:[],
          allBookedUserList:[],
          bookedUserStat:{},
          project:{},
          pageReq:{
            count:'',
            page:'',
            projectId: ''
          },
        }
      },
      components: {
      },
      created(){
        this.handleGetBookedUser();
        this.handleGetAllBookedUser();
        this.handleGetProject();
        this.handleGetStat();
      },
      computed:{
      },
      methods:{
        handleGetProject(){
          fetch('/api/project/info/' +this.$route.params.projectId ).then(response =>{
            if(response.data.success) {
              this.project = response.data.response;
            }
          })
        },
        handleGetBookedUser(){
          this.pageReq.count = 999;
          this.pageReq.page = 0;
          this.pageReq.projectId = this.$route.params.projectId;
          let formData = JSON.stringify(this.pageReq)

          fetch.post('/api/project/booked/list' ,formData).then(response =>{
            if(response.data.success) {
              this.bookedUserList = response.data.response
            }
          })
        },
        handleGetAllBookedUser(){
          this.pageReq.count = 999;
          this.pageReq.page = 0;
          this.pageReq.projectId = this.$route.params.projectId;
          let formData = JSON.stringify(this.pageReq)

          fetch.post('/api/project/booked/history' ,formData).then(response =>{
            if(response.data.success) {
              this.allBookedUserList = response.data.response
            }
          })
        },
        handleGetStat(){
          this.pageReq.projectId = this.$route.params.projectId;
          let formData = JSON.stringify(this.pageReq)

          fetch.post('/api/project/booked/stat' ,formData).then(response =>{
            if(response.data.success) {
              this.bookedUserStat = response.data.response
            }
          })
        },
        changeTouchStatus( bookId ,oldStatus){
          let newStatus = oldStatus?1:0
          fetch.put('/api/project/booked/touch/' + bookId +'/status/' + newStatus).then(response =>{
            if(response.data.success) {
              console.log('update touch status succeed')
            }
          })
        }
      },
    deactivated () {
      this.$destroy()
    }
  }
</script>
<style scoped lang="scss">
  @import '../../../static/css/weui.css';
  @import '../../base/css/_base';
  @import '../../../node_modules/mint-ui/lib/style.css';
  .container{
    background-color: #fff;
    height: 100%;
    .mint-header {
        font-size: 16px;
        height: 45px;
        line-height: 45px;
        background-color: #f2f2f2 !important;
        box-sizing: border-box;
        color: #101010;
    }
    .weui-cells{
      padding: 0 18px;
    }
    .weui-cells:before{
        border-top: 0;
    }
    .weui-cells:after{
        border-bottom: 0;
    }
    a:link{text-decoration:none;}
    a:visited{text-decoration:none;}
    a:hover{text-decoration:none;}
    a:active{text-decoration:none;}
    .eclipse{
      display: -webkit-box;
      text-overflow:ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      line-height: 1.2;
    }
    .mint-navbar .mint-tab-item.is-selected {
      border-bottom: 3px solid #ce3c39;
      color: #ce3c39;
      background-color: #f0f0f0;
    }
    .mint-tabbar > .mint-tab-item.is-selected {
      color: #ce3c39;
    }
    .unit-cell-container{
      margin-top: 45px;
    }
    .unit-cell{
      padding: 5px 0;
      border-bottom: 1px solid #e5e5e5;
      border-radius: 3px;
      display: flex;;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      .cell-top-left{
        height: 30px;
        width: 120px;
        padding-left: 10px;
        .user-name{
          font-size:20px;
          font-weight: bold;
          color:#101010;
        }
        .user-phone{
          line-height: 30px;
        }
      }
      .cell-top-right{
        height: 30px;
      }
      .cell-middle-left{
        padding: 2px;
      }
      .cell-middle-right{
        padding: 2px;
        border: solid thin #3d4145;
        text-align: center;
        span{
          padding: 2px;
        }
        p{
          padding: 2px;
          color: #ce3c39;
        }
      }
      .cell-bottom-right{
        height: 30px;
      }
      .cell-bottom-left{
        height: 30px;
        padding: 10px;
        width: 120px;
      }
      .cell-addon-right{
        height: 30px;
        padding-bottom: 20px;
      }
      .cell-addon-left{
        height: 30px;
        padding: 10px;
        width: 20px;
      }
    }
  }
</style>
